<template>
  <div class="demo" style="position: relative">
    <sweet-anchor :container="scrollCon" @click="handleClick" @change="handleChange" size="big">
      <sweet-anchor-link href="item1" title="item1item1">
        <sweet-anchor-link href="item1-1" title="item1-1"></sweet-anchor-link>
        <sweet-anchor-link href="item1-2" title="item1-2"></sweet-anchor-link>
        <sweet-anchor-link href="item1-3" title="item1-3"></sweet-anchor-link>
      </sweet-anchor-link>
      <sweet-anchor-link href="item2" title="item2"></sweet-anchor-link>
      <sweet-anchor-link href="item3" title="item3"></sweet-anchor-link>
      <sweet-anchor-link href="item4" title="item4"></sweet-anchor-link>
    </sweet-anchor>
    <div
      class="anchor-wrapper"
      ref="listWrapper"
      style="height: 360px; overflow: auto; width: calc(100% - 300px); padding-left: 240px"
    >
      <div class="container1" style="height: 800px" id="item1">container1</div>
      <div class="container5" style="height: 200px" id="item1-1">container1-item1-1</div>
      <div class="container6" style="height: 200px" id="item1-2">container1-item1-2</div>
      <div class="container6" style="height: 200px" id="item1-3">container1-item1-3</div>
      <div class="container2" style="height: 200px" id="item2">container2</div>
      <div class="container3" style="height: 200px" id="item3">container3</div>
      <div class="container4" style="height: 500px" id="item4">container4</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      anchorList: [
        {
          href: 'item1'
        },
        {sublink: true, href: 'item2'},
        {href: 'item3'},
        {href: 'item4'}
      ],
      scrollCon: '.anchor-wrapper'
    };
  },
  methods: {
    handleClick(href) {
      console.log(`select ${href}`);
    },
    handleChange(newHref, oldHref) {
      console.log(`${oldHref} => ${newHref}`);
    }
  }
};
</script>
